<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小米账号-登录</title>
    <link rel="shortcut icon" href="../images/favicon.ico">
    <link rel="stylesheet" href="../css/login.css">
</head>

<body>
    <div class="body">
    <!-- 头部部分 开始 -->
        <div href="#" class="header">
            <a href="gw.html" class="logo"><img src="../images/mi-logo.png" alt="" width="100%"></a>
            <div class="logo_text">
                <h2>小米商城</h2>
                <p>让每个人都能享受科技的乐趣</p>
            </div>
        </div>
        <!-- 头部部分 结束 -->


        <!-- 中间部分 开始 -->
        <div class="middle">
            <div class="user">
                <div class="user_header">
                    <div class="title">
                        <a href="#">账号登录</a>
                    </div>
                    <div class="ma-3">
                        <div class="ma-1">
                            <img src="../images/ma-1.png" alt="">
                        </div>

                        <div class="ma-2">
                            <img src="../images/ma-2.png" alt="">
                        </div>
                    </div>
                </div>
                <div class="user_middle">
                    <form action="">
                    <input type="text" placeholder="手机号码" class="account">
                    <input type="password" name="mima" class="pwd" placeholder="密码">
                    <button type="button" class="loginbtn">登录</button>
                </form>
                <a href="./index-4.html"></a>

                <script>
                    /* 
                    js验证  手机号|...  的正则表达式
                        验证账号：手机号
                        验证密码：6-16英文+数字
                    */
                    // 获取输入框的值: 标签.value
                    let account = document.querySelector(".account");
                    let pwd     = document.querySelector(".pwd");
                    console.log('account: ',account.value);
                    console.log('pwd: ',pwd.value);
                    // 点击登录，获取输入框的值，再去验证用户输入的账号和密码
                    document.querySelector('.loginbtn').onclick = function(){
                        // console.log("点击了登录按钮");
                        // console.log('account: ',account.value);
                        // console.log('pwd: ',pwd.value);
                        let accountVal = account.value;
                        let pwdVal     = pwd.value;
                        console.log(accountVal,pwdVal);
                        // 验证账号
                        let regTel = /^1[3-9][0-9]{9}$/;
                        console.log(regTel.test(accountVal));//正则.test(要验证的值)
                        // if(regTel.test(accountVal) == false){
                        if(!regTel.test(accountVal)){
                            alert('请输入正确的手机号');//弹框
                            return false;
                        }
                        // 验证密码
                        let regPwd =/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/
                        if(regPwd.test(pwdVal) == false){
                            alert('密码必须为6到16位的英文和数字');
                            return false;
                        }
                        // 判断账号和密码是否正确：连接后端（后端连接数据库）
                        if(pwdVal == "123456xl"){
                            window.location.href = './shop.html';
                            return ;
                        }else{
                            alert('密码错误');
                        }
            
                        // 假设账号密码都正确，跳转页面window.location.href = '路径';
                        //  window.location.href = 'https://www.baidu.com';
                        
                    }
                </script>

                    <li><a href="#">手机短信登录/注册</a></li>
                    <li><a href="index-4.html">立即注册</a> <span>|</span> <a href="#">忘记密码</a></li>
                </div>

                <div class="user_footer">其他登录方式</div>
                <div class="user_footer_img">
                    <img src="../images/zhifubao.png" alt="">
                    <img src="../images/weixing.png" alt="">
                    <img src="../images/QQ.png" alt="">
                    <img src="../images/weibo.png" alt="">
            
                </div>
            </div>
        </div>

        <!--扫码登录-->
        <div class="middle2">
            <div class="user">
                <div class="user_header">
                    <div class="ma-3-1">
                        <div class="ma-1">
                            <img src="../images/ma-1-1.png" alt="">
                        </div>
                        <div class="ma-2">
                            <img src="../images/ma-2-2.png" alt="">
                        </div>
                    </div>
                    <img src="../images/ma.png" alt="" class="img-2">
                </div>
                
            </div>
        </div>
        <script>
            document.querySelector('.ma-3').onclick = function(){
                document.querySelector('.middle').style.display = 'none';
                document.querySelector('.middle2').style.display = 'flex';
            }
            document.querySelector('.ma-3-1').onclick = function(){
                document.querySelector('.middle').style.display = 'flex';
                document.querySelector('.middle2').style.display = 'none';
                
            }
        </script>


        <!-- 中间部分 结束 -->


        <!-- 尾部部分 开始 -->
        <div class="footer">
            <ul>
                <li><a href="#">简体</a></li><span>|</span>
                <li><a href="#">繁体</a></li><span>|</span>
                <li><a href="#">English</a></li><span>|</span>
                <li><a href="#">常见问题</a></li><span>|</span>
                <li><a href="#">隐私政策</a></li>
            </ul>
            
        </div>
        <!-- 尾部部分 结束 -->
    </div>
</body>

</html>
